<template>
	<view class="content">
		<text class="title">hello uniapp</text>
		<view class="lay">我是一个跨平台组件</view>
		<view class="text">我是一个text组件</view>
		<button type='default'>我是一个button</button>
		<!-- 我是一个主题色
			1.自己封装一个button
			2.重写button样式( 条件编译 )
		 -->
		<button type='primary'>我是一个button</button>
		<button type='warn'>我是一个button</button>
		<!-- <img src="../../static/images/cvy.png" alt=""> -->
		<!-- <img src="@/static/images/cvy.png" alt=""> -->
		<img class="image" :src="cvy" mode="widthFix">
		<!-- base64字符串 -->

		<scroll-view scroll-y="true" class='hy-v-scroll'>
			<view class='v-item'>item1</view>
			<view class='v-item'>item2</view>
			<view class='v-item'>item3</view>
			<view class='v-item'>item4</view>
			<view class='v-item'>item5</view>
			<view class='v-item'>item6</view>
			<view class='v-item'>item7</view>
			<view class='v-item'>item8</view>
			<view class='v-item'>item9</view>
		</scroll-view>

		<scroll-view scroll-x="true" class='hy-h-scroll' :show-scrollbar="false">
			<view class='h-item'>item1</view>
			<view class='h-item'>item6</view>
			<view class='h-item'>item2</view>
			<view class='h-item'>item3</view>
			<view class='h-item'>item4</view>
			<view class='h-item'>item5</view>
			<view class='h-item'>item7</view>
			<view class='h-item'>item8</view>
			<view class='h-item'>item9</view>
		</scroll-view>

		<swiper class="hy-swiper" :indicator-dots="true" indicator-active-color="#ff8198" indicator-color="#f8f8f8"
			:autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image src="@/static/images/banner/banner01.jpeg" class="swiper-item"></image>
			</swiper-item>
			<swiper-item>
				<image src="@/static/images/banner/banner02.jpeg" class="swiper-item"></image>
			</swiper-item>
			<swiper-item>
				<image src="@/static/images/banner/banner03.jpeg" class="swiper-item"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import cvy from '@/static/images/cvy.png'
	export default {
		data() {
			return {
				title: 'Hello',
				cvy,
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.image {
		width: 200rpx;
	}

	.hy-v-scroll {
		height: 400rpx;
		border: 2rpx solid red;
		box-sizing: border-box;

		.v-item {
			height: 200rpx;
			border-bottom: 2rpx solid blue;
		}
	}

	.hy-h-scroll {
		white-space: nowrap;

		// 隐藏原生滚动条
		&::-webkit-scrollbar {
			display: none;
		}

		// 全局样式
		//:global() 
		:deep(.hy-h-scroll .uni-scroll-view::-webkit-scrollbar) {
			display: none;
		}

		.h-item {
			display: inline-block;
			height: 200rpx;
			width: 200rpx;
			border-right: 2rpx solid hotpink;
		}
	}

	.hy-swiper {
		height: 400rpx;

	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
</style>